<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>店铺基本设置</title>
  <link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css" />
  <link rel="stylesheet" href="../../lib/webuploader/webuploader.css">
  <style>
    .layui-input:focus, .layui-textarea:focus {
      border-color: rgb(240, 97, 47)!important;
    }
    body {
      background-color: #fff;
      padding-right: 20px;
      padding-left: 20px;
    }
    /* 按钮样式 */
    .primary-btn {
      color: #fff;
      background-color: rgb(240, 97, 47) !important;
    }
    .plain-btn {
      background-color: #fff;
      color: rgb(240, 97, 47) !important;
      border: 1px solid rgb(240, 97, 47) !important;
    }
    .hide {
      display: none!important;
    }
    .layui-form-item .layui-input-inline.fln {
      float: none;
    }
    .dib {
      display: inline-block;
    }
    .w80.layui-input-inline {
      width: 80px;
    }
    .w100.layui-input-inline {
      width: 100px;
    }
    .w120.layui-input-inline {
      width: 120px;
    }
    .w150.layui-input-inline {
      width: 150px;
    }
    .w200.layui-input-inline {
      width: 200px;
    }
    .color-red {
      color: red;
    }
    /* 水平线 */
    .hr-primary {
      height: 2px;
      background-color: rgb(240, 97, 47);
    }

    h2.title {
      height: 50px;
      line-height: 50px;
    }

    .form-address-container,
    .form-concat-container,
    .form-checkboxs-container {
      border-top: 1px solid #ccc;
      padding-top: 20px;
      padding-bottom: 10px;
    }
    .form-basic-container {
      padding-top: 20px;
      padding-bottom: 10px;
    }
    .form-basic-container p {
      height: 30px;
      line-height: 30px;
      margin: 5px 0;
    }

    .form-checkboxs-container .layui-inline > * {
      margin-bottom: 10px;
    }
    .form-checkboxs-container .layui-inline .layui-input-inline {
      width: 120px;
    }
    .form-checkboxs-container .layui-inline label {
      text-align: left;
      padding-left: 0;
    }

    /* 后缀 label */
    .form-item .layui-form-label.suffix-label {
      width: auto;
      padding-left: 0;
    }

    /* 发送验证码按钮 */
    .sms-btn {
      display: inline-block;
      text-align: center;
      width: 100px;
      height: 38px;
      margin-right: 10px;
      line-height: 38px;
      border: none;
      border-radius: 5px;
      color: #fff;
      background-color: rgb(240, 97, 47);
    }
    .sms-btn:hover {
      border: none;
      color: #fff;
      background-color: rgb(240, 97, 47);
    }

    .form-address-container label.suffix-label {
      padding-left: 0;
      padding-right: 0;
      width: auto;
      margin-right: 10px;
    }
    .form-address-container label.line {
      width: 1px;
      margin-top: 9px;
      background-color: blue;
    }
    .form-address-container .color-blue {
      cursor: pointer;
      color: blue;
    }

    /* 上传按钮 */
    #store-cover-filePicker,
    #store-filePicker {
      position: relative;
      width: 70px;
    }
    #logo-filePicker .webuploader-pick,
    #store-cover-filePicker .webuploader-pick,
    #store-filePicker .webuploader-pick {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      color: rgb(240, 97, 47);
      background-color: #fff;
    }

    #logo-filePicker {
      z-index: 100;
      background-color: transparent;
      line-height: 100px;
    }
    #logo-filePicker .webuploader-pick {
      background-color: transparent;
    }
    #logo-container {
      position: relative;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
    #logo-filePicker,
    #logo-container .logo-thumbnail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    a.layui-btn:hover {
      border-color: rgb(240, 97, 47);
    }

    /* 设置显示地址按钮 */
    .set-address-btn.current {
      background-color: #ccc;
      cursor: default;
    }

    .form-address-container-template {
      display: none;
    }
  </style>
</head>

<body>
  <div class="order-page layui-row">
    <h2 class="title">基本设置</h2>
    <div class="hr-primary"></div>
    <form class="layui-form" action="">

      <div class="form-basic-container layui-row">
        <div class="layui-col-md8">
          <p>
            <span>公司全称：</span>
            <span>五十家装修工程有限公司</span>
            <span>(企业营业执照全称，第一次输入后不可修改)</span>
          </p>
          <div>
            <span>品牌成立日期：</span>
            <div class="layui-inline">
              <input type="text" name="品牌成立日期" lay-verify="required" class="layui-input" id="date">
            </div>
          </div>
          <p>
            <span>合同状态：</span>
            <span class="color-red">中止（合同截止日期：2018-10-21）</span>
          </p>
          <p>
            <span>店铺名称：</span>
            <span class="store-name">五十家</span>
            <span class="store-name-input dib hide" style="width: 150px;">
              <input type="text" name="storeName" placeholder="请输入新的店铺名称" autocomplete="off" class="layui-input layui-input-inline"
                style="height: 30px; line-height: 30px;">
            </span>
            <span>（商家一个月可修改一次）</span>
            <a style="color: red;" class="edit-store-name-btn layui-btn layui-btn-primary layui-btn-sm">
              <i class="layui-icon">&#xe642;</i>
              <span>修改</span>
            </a>
            <a style="color: red;" class="hide cancel-edit-store-name-btn layui-btn layui-btn-primary layui-btn-sm">
              <i class="layui-icon">&#x1006;</i>
              <span>取消修改</span>
            </a>
          </p>
          <p>
            <span>店铺资质：</span>
            <a id="store-filePicker" style="color: red;" class="layui-btn layui-btn-primary layui-btn-sm">
              上传
            </a>

            <div id="store-fileList" class="uploader-list">
              <!--用来存放item-->
            </div>
          </p>
          <p>
            <span>店铺封面：</span>
            <a id="store-cover-filePicker" style="color: red;" class="layui-btn layui-btn-primary layui-btn-sm">
              上传
            </a>

            <div id="store-cover-fileList" class="uploader-list">
              <!--用来存放item-->
            </div>
          </p>
        </div>

        <div class="layui-col-md4">
          <p>品牌LOGO：</p>
          <div>
            <div id="logo-container" class="dib" style="margin-right: 10px; vertical-align: middle;">
              <a id="logo-filePicker" style="color: red;" class="layui-btn layui-btn-primary layui-btn-sm">
                点击上传
              </a>
            </div>
            <div class="dib" style="    vertical-align: middle;">
              <p>LOGO 尺寸：200px × 200px</p>
              <p>仅支持 JPG、PNG 图片类型</p>
              <p>文件小于 200KB </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 半包，全包，局部，全案 -->
      <div class="form-checkboxs-container layui-form-item layui-row">
        <div class="layui-inline layui-col-xs5 layui-col-md5 layui-col-sm12">
          <input type="checkbox" value="half" name="checkboxs[]" title="半包" lay-skin="primary" />
          <textarea name="textarea_half" lay-verify="length_max_1000" placeholder="请输入包含项目说明" class="layui-textarea"></textarea>
          <div class="layui-clear">
            <input type="text" name="input_half" placeholder="￥" autocomplete="off" class="layui-input layui-input-inline" />
            <label class="layui-form-label layui-input-inline">元 / m&sup2;</label>
          </div>
        </div>
        <div class="layui-inline layui-col-xs5 layui-col-md5 layui-col-sm12">
          <input type="checkbox" value="all" name="checkboxs[]" title="全包" lay-skin="primary" />
          <textarea name="textarea_all" lay-verify="length_max_1000" placeholder="请输入包含项目说明" class="layui-textarea"></textarea>
          <div class="layui-clear">
            <input type="text" name="input_all" placeholder="￥" autocomplete="off" class="layui-input layui-input-inline" />
            <label class="layui-form-label layui-input-inline">元 / m&sup2;</label>
          </div>
        </div>
        <div class="layui-inline layui-col-xs5 layui-col-md5 layui-col-sm12">
          <input type="checkbox" value="part" name="checkboxs[]" title="局部" lay-skin="primary" />
          <textarea name="textarea_part" lay-verify="length_max_1000" placeholder="请输入包含项目说明" class="layui-textarea"></textarea>
          <div class="layui-clear">
            <input type="text" name="input_part" placeholder="￥" autocomplete="off" class="layui-input layui-input-inline" />
            <label class="layui-form-label layui-input-inline">元 / m&sup2;</label>
          </div>
        </div>
        <div class="layui-inline layui-col-xs5 layui-col-md5 layui-col-sm12">
          <input type="checkbox" value="whole" name="checkboxs[]" title="全案" lay-skin="primary" />
          <textarea name="textarea_whole" lay-verify="length_max_1000" placeholder="请输入包含项目说明" class="layui-textarea"></textarea>
          <div class="layui-clear">
            <input type="text" name="input_whole" placeholder="￥" autocomplete="off" class="layui-input layui-input-inline" />
            <label class="layui-form-label layui-input-inline">元 / m&sup2;</label>
          </div>
        </div>
      </div>

      <!-- 商铺联系人、电话等信息 -->
      <div class="form-concat-container">
        <div class="layui-form-item form-item">
          <label class="layui-form-label">商铺电话：</label>
          <div class="layui-input-inline w150">
            <input type="text" name="telephone" lay-verify="required|storePhone" placeholder="请输入手机号码" autocomplete="off"
              class="layui-input">
          </div>
          <label class="suffix-label layui-form-label">（接收业主的咨询电话，手机或座机均可，座机号码请注意加区号）</label>
        </div>

        <div class="layui-form-item form-item">
          <label class="layui-form-label">联系人：</label>
          <div class="layui-input-inline w150">
            <input type="text" name="contacts1" lay-verify="required|space|symbol|length_2_6" placeholder="请输入姓名" autocomplete="off" class="layui-input">
          </div>
          <label class="suffix-label layui-form-label">（即店铺运营人员）</label>
        </div>

        <div class="layui-form-item form-item">
          <label class="layui-form-label">联系电话：</label>
          <div class="layui-input-inline w150">
            <input type="text" name="phone1" lay-verify="required|number|myphone" placeholder="请输入手机号码" autocomplete="off"
              class="layui-input">
          </div>
          <a href="javascript:;" class="sms-btn sms-btn-1">发送验证码</a>
          <div class="layui-input-inline w150 fln">
            <input type="text" name="code1" lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item form-item">
          <label class="layui-form-label">负责人：</label>
          <div class="layui-input-inline w150">
            <input type="text" name="contacts2" lay-verify="required|space|symbol|length_2_6" placeholder="请输入姓名" autocomplete="off" class="layui-input">
          </div>
          <label class="suffix-label layui-form-label">（即店铺负责人或客户信息对接人，接收短信及事务处理）</label>
        </div>

        <div class="layui-form-item form-item">
          <label class="layui-form-label">电话号码：</label>
          <div class="layui-input-inline w150">
            <input type="text" name="phone2" lay-verify="required|phone|myphone" placeholder="请输入手机号码" autocomplete="off"
              class="layui-input">
          </div>
          <a href="javascript:;" class="sms-btn sms-btn-2">发送验证码</a>
          <div class="layui-input-inline w150 fln">
            <input type="text" name="code2" lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <!-- 店面地址 -->
      <div class="form-address-container">
        <input type="hidden" id="current_address_index" name="current_address_index">
        <div class="layui-form-item form-address-container-template">
          <label class="layui-form-label">店面地址：</label>
          <div class="select-box select-province layui-input-inline w100">
            <select name="province[]" lay-verify="">
              <option value="">请选择一个城市</option>
              <option value="010">北京</option>
              <option value="021">上海</option>
              <option value="0571">杭州</option>
            </select>
          </div>
          <label class="suffix-label layui-form-label">省</label>
          <div class="select-box select-city layui-input-inline w120">
            <select name="city[]" lay-verify="">
              <option value="">请选择一个城市</option>
              <option value="010">北京</option>
              <option value="021">上海</option>
              <option value="0571">杭州</option>
            </select>
          </div>
          <label class="suffix-label layui-form-label">市</label>
          <div class="select-box select-country layui-input-inline w80">
            <select name="country[]" lay-verify="">
              <option value="">请选择一个城市</option>
              <option value="010">朝阳</option>
              <option value="021">上海</option>
              <option value="0571">杭州</option>
            </select>
          </div>
          <label class="suffix-label layui-form-label">区</label>

          <div class="layui-input-inline w150">
            <input type="text" name="region[]" placeholder="太阳宫地区" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline w200">
            <input type="text" name="address[]" placeholder="北四环……" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline" style="width: 50px;">
            <input type="text" name="area[]" placeholder="2000" autocomplete="off" class="layui-input">
          </div>
          <label class="suffix-label layui-form-label">m&sup2;</label>
          <label class="suffix-label layui-form-label color-blue">地图定位</label>
          <label class="suffix-label layui-form-label color-blue line"></label>
          <label class="suffix-label layui-form-label color-blue delete-address-btn">删除该地址</label>
          <label class="suffix-label layui-form-label color-blue line"></label>
          <label class="suffix-label layui-form-label color-blue add-address-btn">添加新分店</label>
          <a class="set-address-btn layui-btn">设为显示地址</a>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">店面地址：</label>
          <div class="select-box select-province layui-input-inline w100">
            <select name="province[]" lay-verify="">
              <option value="">请选择一个城市</option>
              <option value="010">北京</option>
              <option value="021">上海</option>
              <option value="0571">杭州</option>
            </select>
          </div>
          <label class="suffix-label layui-form-label">省</label>
          <div class="select-box select-city layui-input-inline w120">
            <select name="city[]" lay-verify="">
              <option value="">请选择一个城市</option>
              <option value="010">北京</option>
              <option value="021">上海</option>
              <option value="0571">杭州</option>
            </select>
          </div>
          <label class="suffix-label layui-form-label">市</label>
          <div class="select-box select-country layui-input-inline w80">
            <select name="country[]" lay-verify="">
              <option value="">请选择一个城市</option>
              <option value="010">朝阳</option>
              <option value="021">上海</option>
              <option value="0571">杭州</option>
            </select>
          </div>
          <label class="suffix-label layui-form-label">区</label>

          <div class="layui-input-inline w150">
            <input type="text" name="region[]" placeholder="太阳宫地区" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline w200">
            <input type="text" name="address[]" placeholder="北四环……" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline" style="width: 50px;">
            <input type="text" name="area[]" placeholder="2000" autocomplete="off" class="layui-input">
          </div>
          <label class="suffix-label layui-form-label">m&sup2;</label>
          <label class="suffix-label layui-form-label color-blue">地图定位</label>
          <label class="suffix-label layui-form-label color-blue line"></label>
          <label class="suffix-label layui-form-label color-blue delete-address-btn">删除该地址</label>
          <label class="suffix-label layui-form-label color-blue line"></label>
          <label class="suffix-label layui-form-label color-blue add-address-btn">添加新分店</label>
          <a class="set-address-btn layui-btn">设为显示地址</a>
        </div>
      </div>

      <!-- 擅长房型、公司简介 -->
      <div class="desc">
        <div class="layui-form-item">
          <label class="layui-form-label" style="padding-bottom: 30px;">擅长房型：</label>
          <input type="checkbox" lay-filter="checkboxs" value="1" name="roomType[]" title="局部" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="2" name="roomType[]" title="一居室" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="3" name="roomType[]" title="两居室" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="4" name="roomType[]" title="三居室" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="5" name="roomType[]" title="四居室" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="6" name="roomType[]" title="复式" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="7" name="roomType[]" title="别墅" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="8" name="roomType[]" title="简装" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="9" name="roomType[]" title="工装" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="10" name="roomType[]" title="新房" lay-skin="primary">
          <input type="checkbox" lay-filter="checkboxs" value="11" name="roomType[]" title="期房" lay-skin="primary">
          <p style="margin: 10px 0;color: #bbb;">* 最多选择3个</p>
        </div>
        <div class="layui-form-item">
          <div>
            <label class="layui-form-label">公司介绍：</label>
            <textarea id="desc" name="desc" style="display: inline-block;width: 50%;"
              lay-verify="required|length_max_1000"
              placeholder="请输入" class="layui-textarea">sss</textarea>
          </div>
          <div class="layui-form-mid layui-word-aux desc_length" style="margin-left: 110px;"></div>
        </div>

      </div>

      <!-- 保存信息按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="search-btn primary-btn layui-btn" lay-submit lay-filter="formDemo">
            保存信息
          </button>
        </div>
      </div>
    </form>
  </div>
  <script src="../../lib/layui/layui.js"></script>
  <script src="../../lib/jquery.min.js"></script>
  <script src="../../scripts/custom-verify.js"></script>
  <script src="../../lib/webuploader//webuploader.html5only.min.js"></script>
  <script src="../../scripts/uploader.js"></script>
  <script>
    layui.use(["laydate", "form", "element", "layer", "jquery"], function () {
      var form = layui.form;
      var element = layui.element;
      var laydate = layui.laydate;
      var layer = layui.layer;
      var $ = layui.jquery;
      laydate.render({
        elem: '#date' // 指定日期元素
      });


      form.render();
      var verifyObj = getCustomVerifyObj();
      verifyObj.storePhone = function (value, dom) {
        var reg = /^\d{4}(-)\d{6}$/
        if (reg.test(value)) {

        } else {
          return verifyObj.myphone(value, dom)
        }
      }
      form.verify(verifyObj);

      form.on("select", function (data) {
        console.log(data)
        var name = data.elem.name; // name 属性
        var value = data.value; //当前选择的值
        var $nextSelect;
        var data; // ajax 参数
        if (/province/.test(name)) {
          // 当前选择的是省份
          $nextSelect = $(data.elem).parents('.select-box').siblings('.select-city').find('select');
          data = {
            province: value
          }
        }
        if (/city/.test(name)) {
          $nextSelect = $(data.elem).parents('.select-box').siblings('.select-country').find('select');
          data = {
            city: value
          }

        }
        if ($nextSelect && $nextSelect.length) {
          // 效果测试代码
          var html =
            '<option value="010">拼接1</option>\
                <option value="021">拼接2</option>\
                <option value="0571">拼接3</option>'
          $nextSelect.html(html);
          form.render('select');

          // ajax 请求数据
          // $.ajax({
          //   type: '',
          //   url: '',
          //   data: data,
          //   success: function (resp) {
          //     var html = '<option value="010">拼接1</option>\
          //           <option value="021">拼接2</option>\
          //           <option value="0571">拼接3</option>'
          //     $nextSelect.html(html);
          //     form.render('select');
          //   }
          // })
        }
      })
      var uploader1 = singlePicUploader({
        $fileList: $("#store-fileList"),
        server: "", // 文件上传地址
        pick: "#store-filePicker",
        success: function (resp) {
          console.log(resp)
        }
      })
      var uploader3 = multiPicUploader({
        $fileList: $("#store-cover-fileList"),
        server: "",  // 文件上传地址
        pick: "#store-cover-filePicker",
        success: function (resp) {
          console.log(resp)
        }
      })
      var uploader2 = singlePicUploader({
        $fileList: $("#logo-container"),
        server: "", // 文件上传地址
        pick: "#logo-filePicker",
        success: function (resp) {
          console.log(resp)
        }
      })

      // 查看店铺资质图片
      $('#store-fileList').on('click', '.file-item', function () {
        var url = $(this).attr('data-url');
        var url = 'http://pic1.win4000.com/wallpaper/7/539f9c9ce2764.jpg';
        var index = layer.open({
          title: '店铺资质',
          offset: '100px',
          area: '500px',
          content: '<img style="max-width: 400px;display: block;margin: 0 auto;" src="' + url + '" />'
        });
      })

      //监听表单信息提交
      form.on("submit(formDemo)", function (data) {
        var data = data.field;
        console.log("表单数据如下：");
        console.log(data); //当前容器的全部表单字段，名值对形式：{name: value}

        var dataList = $("form").serializeArray();
        // 半包，全包，局部，全案
        for (var i = 0; i < dataList.length; i++) {
          var item = dataList[i];
          if (item.name === 'checkboxs[]') {
            var value = item.value
            if (!value) {
              layer.msg("请选择半包全包解决方案", {
                icon: 5
              });
              return false;
            }
            if (!data['textarea_' + value]) {
              layer.msg("请填写对应的项目说明", {
                icon: 5
              });
              $("[name='textarea_" + value + "']").focus();
              return false;
            }
            if (!data['input_' + value]) {
              layer.msg("请填写对应的价格", {
                icon: 5
              });
              $("[name='input_" + value + "']").focus();
              return false;
            }
          }
        }

        // 擅长房型
        var dataList = $("form").serializeArray();
        var roomTypeFilter = dataList.filter(function (item) {
          return item.name.indexOf('roomType') !== -1;
        });
        if (!roomTypeFilter.length) {
          layer.msg("擅长房型至少选择一个", {
            icon: 5
          });
          return false;
        }

        layer.msg("打开开发者控制台查看保存信息");
        return false; // 阻止表单跳转
      });

      // 房间类型复选框选中事件
      form.on('checkbox(checkboxs)', function (data) {
        var dataList = $("form").serializeArray();
        var filter = dataList.filter(function (item) {
          return item.name.indexOf('roomType') !== -1;
        });
        if (filter.length > 3) {
          layer.msg("擅长房型最多选择3个", {
            icon: 5
          });
          $(data.elem).next().trigger('click');
        }
      });

      // 发送验证码
      $('.sms-btn-1').on('click', function () {

        layer.msg("联系电话：");
      })
      $('.sms-btn-2').on('click', function () {

        layer.msg("电话号码：");
      })

      // 已设为显示地址
      $('body').on('click', '.set-address-btn', function () {
        if ($(this).hasClass('current')) {
          return false;
        }

        var $btns = $('.form-address-container .layui-form-item').not('.form-address-container-template').find(
          '.set-address-btn')
        $btns.removeClass('current');
        $btns.each(function () {
          $(this).text('设为显示地址')
        })
        $(this).addClass('current').text('已设为显示地址');

        $btns.each(function (index) {
          if ($(this).hasClass('current')) {
            $('#current_address_index').val(index);
            var order = index + 1;
            layer.msg("已将第" + order + "项设为显示地址");
          }
        })
      })

      // 删除
      $('body').on('click', '.delete-address-btn', function () {
        if ($('.form-address-container .layui-form-item').length <= 2) {
          layer.msg("当前只剩一个分店，无法删除", {
            icon: 5
          });
          return false;
        }
        $(this).parents('.layui-form-item').remove();
        layer.msg("已删除");
      })

      // 添加新分店
      createNewAddress();
      $('body').on('click', '.add-address-btn', function () {
        createNewAddress();
      })

      function createNewAddress() {
        var $clone = $('.form-address-container-template').clone()
        $clone.removeClass('form-address-container-template');
        $('.form-address-container > div').last().after($clone)
        form.render();
      }

      // 修改店铺名字
      $('.edit-store-name-btn, .cancel-edit-store-name-btn').on('click', function () {
        $('.store-name-input, .store-name, .cancel-edit-store-name-btn, .edit-store-name-btn').toggleClass(
          'hide')
        if ($(this).hasClass('cancel-edit-store-name-btn')) {
          layer.msg("clicked: 取消修改");
          $('.store-name-input input').val('')
        } else {
          layer.msg("clicked: 修改");
          $('.store-name-input input').focus()
        }
      })


      $('#desc').on('input', function () {
        lengthCount( $(this), $('.desc_length'), 1000 );
      })
      lengthCount( $('#desc'), $('.desc_length'), 1000 )
      function lengthCount ($textarea, $lengthBox, maxLength) {
        if (!$textarea.length || !$lengthBox.length) {
          return false;
        }

        maxLength = maxLength || 1000;
        
        var value = $textarea.val();
        var length = value.length;
        $lengthBox.text('已输入' + length + '个字');

        if (length > maxLength) {
          $textarea.val(value.substr(0, maxLength));
          layer.msg('最多允许 1000 个字', {
            icon: 5
          });

          var value = $textarea.val();
          var length = value.length;
          $lengthBox.text('已输入' + length + '个字');
        }
      }

    });
  </script>
</body>

</html>